<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
父组件用事件修改子组件的data ，子组件修改自己自己data的内容
<script src="../js/vue.min.js"></script>
<div id="app">
    <button @click="toshow">点击让子组件显示</button>
    <children><span slot="first">【12345】</span>
        <!--上面这行不会显示-->
    </children>
</div>
<script>
    var vm = new Vue({
        el: '#app', methods: {
            toshow: function () {
                this.$children[0].tohidden = true;
                console.log(this.$children[0].tohidden)
            }
        }, components: {
            children: {
                //这个无返回值，不会继续派发
                template: "<div v-if='tohidden' @click='tohide'>这里是子组件</div>",
                data: function () {
                    return {tohidden: false}
                }, methods: {
                    tohide: function () {
                        this.tohidden = !this.tohidden;
                    }
                }
            }
        }
    });  </script>


</body>
</html>